<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="240px" style="height: 100vh">
        <div class="logo">
          <img src="../../assets/img/logo.png" alt="" />
          <div class="title">山海花艺商城</div>
        </div>
        <!-- 侧边菜单 -->
        <div>
          <el-scrollbar>
            <el-menu :default-openeds="['1', '3']">
              <el-sub-menu
                :index="item.id"
                v-for="item in tabList"
                :key="item.name"
              >
                <template #title>
                  <el-icon>
                    <img :src="item.url" alt="" />
                  </el-icon>
                  <span class="item">{{ item.name }}</span>
                </template>
                <el-menu-item
                  :index="value.id"
                  v-for="value in item.children"
                  :key="value.name"
                  @click="changeRoute({ path: value.path, name: value.name })"
                >
                  {{ value.name }}
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
        </div>
      </el-aside>
      <el-container>
        <el-header height="136px">
          <div class="title">
            <div class="news">
              <img src="../../assets/img/xx.png" alt="" />
            </div>
            <!-- xxx欢迎你 -->
            <template v-if="xiuEr">
              <dir class="user">
                <img src="../../assets/img/tx.png" alt="" />
                <!-- 顶部ID切换 -->
                <div>{{ username }},欢迎你</div>
              </dir>
              <div class="goOut" @click="getOut">退出登录</div>
            </template>
          </div>
          <div class="nav">
            <el-breadcrumb :separator-icon="ArrowRight">
              <el-breadcrumb-item
                v-for="item in navList"
                :key="item.name"
                :to="{ path: item.path }"
                >{{ item.name }}</el-breadcrumb-item
              >
            </el-breadcrumb>
          </div>
        </el-header>
        <el-main style="height: calc(100vh - 136px)">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { computed, ref } from "vue";
export default {
  setup() {
    const router = useRouter();
    // const route = useRoute();
    const store = useStore();
    const tabList = ref([
      {
        name: "数据中心",
        id: "1",
        url: require("../../assets/img/01sj.png"),
        children: [
          {
            name: "实时数据",
            id: "1-1",
            path: "/home/realtime",
          },
          {
            name: "客户数据",
            id: "1-2",
            path: "/home/customer",
          },
        ],
      },
      {
        url: require("../../assets/img/02dd.png"),
        id: "2",
        name: "订单管理",
        children: [
          {
            name: "全部订单",
            id: "2-1",
            path: "/home/order-all",
          },
          {
            name: "待支付订单",
            id: "2-2",
            path: "/home/unpaid",
          },
          {
            name: "待发货订单",
            id: "2-3",
            path: "/home/unshipped",
          },
          {
            name: "待收货订单",
            id: "2-4",
            path: "/home/unreceived",
          },
          {
            name: "已取消订单",
            id: "2-5",
            path: "/home/cancel",
          },
          {
            name: "异常订单",
            id: "2-6",
            path: "/home/abnormal",
          },
        ],
      },
      {
        name: "商品管理",
        id: "3",
        url: require("../../assets/img/03sp.png"),
        children: [
          {
            name: "全部商品",
            id: "3-1",
            path: "/home/all",
          },
          {
            name: "新增商品",
            id: "3-2",
            path: "/home/add",
          },
        ],
      },
      {
        name: "营销管理",
        id: "4",
        url: require("../../assets/img/04yx.png"),
        children: [
          {
            name: "优惠券",
            id: "4-1",
            path: "/home/coupon",
          },
          {
            name: "秒杀",
            id: "4-2",
            path: "/home/seckill",
          },
        ],
      },
    ]);

    // v-if的取值
    const xiuEr = ref(true);

    const getOut = () => {
      router.push("/login");
    };

    const changeRoute = (data) => {
      router.push(data.path);
      store.commit("changeNav", data);
    };

    let username = localStorage.getItem("name");

    // 导航栏
    const navList = computed(() => {
      return store.state.navList;
    });
    return {
      tabList,
      navList,
      changeRoute,
      username,
      xiuEr,
      getOut,
    };
  },
};
</script>

<style lang="less" scoped>
.logo {
  width: 100%;
  position: relative;
  img {
    width: 64px;
    height: 64px;
    margin: 8px 0 0 20px;
  }
  .title {
    font-size: 18px;
    position: absolute;
    top: 30px;
    right: 29px;
    color: #333333;
    font-family: MicrosoftYaHei;
  }
}
.el-sub-menu {
  background-color: #fcc284;
  .item {
    font-size: 18px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
  }
}
.el-menu-item {
  background-color: #fcc284;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  color: #333333;
  text-indent: 60px;
}
.is-active {
  background-color: white;
}
.is-opened {
  background-color: #fcc284;
}
.el-icon {
  margin-right: 15px;
}

.el-aside {
  background-color: #fcc284;
  // margin-right: 16px;
}
.el-header {
  height: 100px;
  .title {
    width: 100%;
    height: 60px;
    background-color: #fcc284;
    display: flex;
    justify-content: right;
    align-items: center;
    font-size: 18px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
    .news {
      margin-right: 5px;
      .img {
        width: 25px;
        height: 24px;
      }
    }
    .user {
      margin-right: 15px;
      display: flex;
      align-items: center;
      img {
        width: 48px;
        height: 48px;
        margin-right: 6px;
      }
    }
    .goOut {
      margin-right: 19px;
    }
  }
  .nav {
    width: 100%;
    height: 30px;
    margin-top: 16px;
    background-color: #ffffff;
    padding: 9px 0 0 16px;
    /deep/.el-breadcrumb__inner {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #fcc284;
    }
  }
}
</style>
